@attribute [Route(PageUrls.Product + "/{Id:int}")]
@attribute [Route("{culture?}" + PageUrls.Product + "/{Id:int}")]
@attribute [AppResponseCache(SharedMaxAge = 3600 * 24, MaxAge = 60 * 5)]
@inherits AppPageBase

<AppPageData ShowGoBackButton="true" Title="@product?.Name" />

<HeadContent>
    <meta name="title" content="@product?.Name" />
    <meta name="description" content="@product?.DescriptionText" />

    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Boilerplate" />
    <meta property="og:title" content="@product?.Name" />
    <meta property="og:description" content="@product?.DescriptionText" />
    <meta property="og:image" content="@GetProductImageUrl(product)" />
    <meta property="og:url" content="@NavigationManager.Uri" />

    <meta name="twitter:title" content="@product?.Name" />
    <meta name="twitter:description" content="@product?.DescriptionText" />
    <meta name="twitter:image" content="@GetProductImageUrl(product)" />
    <meta name="twitter:card" content="summary_large_image" />
</HeadContent>

<section>
    <BitStack Gap="2rem" Class="root-stack">

        @if (isLoadingProduct)
        {
            <BitCard FullWidth Background="BitColorKind.Tertiary" Style="padding:3rem 1rem;">
                <BitStack Horizontal HorizontalAlign="BitAlignment.Center" Gap="2rem" Class="product-stack">
                    <BitShimmer Height="256px" Width="50%" Background="BitColor.PrimaryBackground" />
                    <BitStack AutoHeight Grows>
                        <BitShimmer Height="6rem" Width="100%" />
                        <BitShimmer Height="1rem" Width="100%" />
                        <BitShimmer Height="1rem" Width="100%" />
                        <BitShimmer Height="1rem" Width="100%" />
                        <BitShimmer Height="3rem" Width="100%" />
                    </BitStack>
                </BitStack>
            </BitCard>

            <br />

            <BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.About)]</BitText>

            <BitCard FullWidth>
                <BitStack AutoHeight Grows>
                    <BitShimmer Height="1rem" Width="100%" />
                    <BitShimmer Height="1rem" Width="100%" />
                    <BitShimmer Height="1rem" Width="100%" />
                    <BitShimmer Height="1rem" Width="100%" />
                    <BitShimmer Height="1rem" Width="100%" />
                </BitStack>
            </BitCard>
        }
        else
        {
            if (product is null)
            {
                <NotFoundPage />
            }
            else
            {
                <BitCard FullWidth Style="padding:3rem 1rem;">
                    <BitStack Horizontal HorizontalAlign="BitAlignment.Center" Gap="2rem" Class="product-stack">
                        <ProductImage Src="@GetProductImageUrl(product)" Alt="@product.PrimaryImageAltText" Width="50%" />
                        <BitStack AutoWidth Grows>
                            <BitText Typography="BitTypography.H2">@product.Name</BitText>
                            <BitText Color="BitColor.Info">@product.CategoryName</BitText>
                            <BitText Typography="BitTypography.H6">@((MarkupString)product.DescriptionHTML!)</BitText>
                            <BitText Typography="BitTypography.H4">@product.FormattedPrice</BitText>
                            <BitButton AutoLoading OnClick="WrapHandled(Buy)">@Localizer[nameof(AppStrings.Buy)]</BitButton>
                        </BitStack>
                    </BitStack>
                </BitCard>

                <br />

                <BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.About)]</BitText>

                <BitCard FullWidth>
                    <BitText>
                        (The following text is just a sample placeholder and is not related to the above car)
                        <br />
                        A <b>standard car</b> is designed with a focus on <b>functionality</b>, and <b>performance</b>.
                        It generally features a four-cylinder <b>internal combustion engine</b>, although some models come with six or eight-cylinder engines for added power.
                        The car's engine is paired with either an automatic or manual transmission to control gear shifts.
                        <br /><br />
                        The exterior includes features like <b>headlights</b>, <b>tail lights</b>, and <b>side mirrors</b> to ensure visibility and safety.
                        Inside, you'll find a seating capacity for four to five passengers, with seats typically upholstered in fabric or leather.
                        The dashboard is equipped with various controls, including an infotainment system that often supports Bluetooth connectivity,
                        a touchscreen display, and sometimes a GPS navigation system.
                        <br /><br />
                        For safety, standard cars are fitted with <b>airbags</b>, anti-lock braking systems (<b>ABS</b>), and electronic stability control (<b>ESC</b>).
                        The suspension system, including shock absorbers and struts, ensures a smooth ride by absorbing road irregularities.
                        <br /><br />
                        Fuel efficiency varies, but a typical car might offer around <b>25-30</b> miles per gallon (<b>mpg</b>) in combined city and highway driving.
                        Additionally, trunk space provides adequate room for luggage and groceries, making it a practical choice for <b>everyday use</b>.
                        <br /><br />
                        In summary, a generic car is designed to balance:
                        <ul>
                            <li>performance</li>
                            <li>comfort</li>
                            <li>safety</li>
                        </ul>
                        making it a reliable and convenient mode of transportation for daily activities.
                    </BitText>
                </BitCard>
            }
        }

        <br />
        <br />

        @if (isLoadingSimilarProducts)
        {
            <BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SimilarProducts)]</BitText>

            <BitScrollablePane Width="100%" Style="padding:0.5rem 1.5px">
                <BitStack Horizontal FitWidth Style="align-items:unset">
                    @foreach (var itm in Enumerable.Range(0, 10))
                    {
                        <BitCard FullSize Style="width:250px">
                            <BitStack>
                                <BitShimmer Height="220px" Width="100%" Background="BitColor.PrimaryBackground" />
                                <BitShimmer Height="1rem" Width="100%" Background="BitColor.PrimaryBackground" />
                                <BitShimmer Height="1rem" Width="100%" Background="BitColor.PrimaryBackground" />
                                <BitShimmer Height="1rem" Width="100%" Background="BitColor.PrimaryBackground" />
                                <BitShimmer Height="2rem" Width="100%" Background="BitColor.PrimaryBackground" />
                            </BitStack>
                        </BitCard>
                    }
                </BitStack>
            </BitScrollablePane>
        }
        else if (similarProducts is not null)
        {
            <BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SimilarProducts)]</BitText>

            <BitScrollablePane Width="100%" Style="padding:0.5rem 1.5px">
                <BitStack Horizontal FitWidth Style="align-items:unset">
                    @foreach (var prd in similarProducts)
                    {
                        <BitLink Href="@prd.PageUrl" NoUnderline Style="width:250px">
                            <BitCard FullSize>
                                <BitStack>
                                    <ProductImage Src="@GetProductImageUrl(prd)" Alt="@prd.PrimaryImageAltText" Width="100%" />
                                    <BitText>@prd.Name</BitText>
                                    <BitText Typography="BitTypography.Body2">@((MarkupString)prd.DescriptionHTML!)</BitText>
                                    <BitText Typography="BitTypography.H6">@prd.FormattedPrice</BitText>
                                </BitStack>
                            </BitCard>
                        </BitLink>
                    }
                </BitStack>
            </BitScrollablePane>
        }

        <br />

        @if (isLoadingSiblingProducts)
        {
            <BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SiblingProducts)]</BitText>

            <BitScrollablePane Width="100%" Style="padding:0.5rem 1.5px">
                <BitStack Horizontal FitWidth Style="align-items:unset">
                    @foreach (var itm in Enumerable.Range(0, 10))
                    {
                        <BitCard FullSize Style="width:250px">
                            <BitStack>
                                <BitShimmer Height="220px" Width="100%" Background="BitColor.PrimaryBackground" />
                                <BitShimmer Height="1rem" Width="100%" Background="BitColor.PrimaryBackground" />
                                <BitShimmer Height="1rem" Width="100%" Background="BitColor.PrimaryBackground" />
                                <BitShimmer Height="1rem" Width="100%" Background="BitColor.PrimaryBackground" />
                                <BitShimmer Height="2rem" Width="100%" Background="BitColor.PrimaryBackground" />
                            </BitStack>
                        </BitCard>
                    }
                </BitStack>
            </BitScrollablePane>
        }
        else if (siblingProducts is not null)
        {
            <BitText Typography="BitTypography.H4">@Localizer[nameof(AppStrings.SiblingProducts)]</BitText>

            <BitScrollablePane Width="100%" Style="padding:0.5rem">
                <BitStack Horizontal FitWidth Style="align-items:unset">
                    @foreach (var prd in siblingProducts)
                    {
                        <BitLink Href="@prd.PageUrl" NoUnderline Style="width:250px">
                            <BitCard FullSize>
                                <BitStack>
                                    <ProductImage Src="@GetProductImageUrl(prd)" Alt="@prd.PrimaryImageAltText" Width="100%" />
                                    <BitText>@prd.Name</BitText>
                                    <BitText Typography="BitTypography.Body2">@((MarkupString)prd.DescriptionHTML!)</BitText>
                                    <BitText Typography="BitTypography.H6">@prd.FormattedPrice</BitText>
                                </BitStack>
                            </BitCard>
                        </BitLink>
                    }
                </BitStack>
            </BitScrollablePane>
        }

    </BitStack>
</section>